<template>
  <div>
    <slot/>
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="TabelData"
      max-height="650"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @row-dblclick="rowDblclick"
      @selection-change="selectionChange"
      @row-click="rowClick">

      <el-table-column v-if="selection" width="60px" type="selection" align="center"/>

      <el-table-column v-for="item in TableHead" :label="item.label" :prop="item.field" :width="isShowIndex(item)" align="center" default-sort>
        <template slot-scope="scope">
          <el-popover v-if="popover" trigger="click" placement="top">
            <span v-if="item.fieldTT">{{ Util.nullToString(scope.row, item.field+"."+item.fieldT+"."+ item.fieldTT) }}</span>
            <span v-else-if="item.fieldT">{{ Util.nullToString(scope.row, item.field+"."+item.fieldT) }}</span>
            <span v-else>{{ Util.nullToString(scope.row, item.field) }}</span>
            <div slot="reference" class="name-wrapper">
              <span v-if="item.fieldTT">{{ Util.nullToString(scope.row, item.field+"."+item.fieldT+"."+ item.fieldTT) }}</span>
              <span v-else-if="item.fieldT">{{ Util.nullToString(scope.row, item.field+"."+item.fieldT) }}</span>
              <span v-else>{{ Util.nullToString(scope.row, item.field) }}</span>
            </div>
          </el-popover>

          <template v-else>
            <span v-if="item.fieldTT">{{ Util.nullToString(scope.row, item.field+"."+item.fieldT+"."+ item.fieldTT) }}</span>
            <span v-else-if="item.fieldT">{{ Util.nullToString(scope.row, item.field+"."+item.fieldT) }}</span>
            <span v-else>{{ Util.nullToString(scope.row, item.field) }}</span>
          </template>

        </template>

      </el-table-column>

      <el-table-column v-if="rowHandleBut && rowHandleBut.length > 0" :width="computedWidth" align="center" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-for="item in rowHandleBut" :type="item.type" :disabled=" scope.row.isDisabled" size="mini" @click="rowHandle(item.butEvent, scope.row)">{{ item.butValue }}</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div v-if="pagination" class="pagination-container">
      <el-pagination v-if="small" :current-page="listQuery.pageNumber" :page-sizes="pageSizes()" :page-size="listQuery.pageSize" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>

      <el-pagination
        v-else
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Index',
  props: {
    // 加载状态
    listLoading: {
      type: Boolean,
      default: false
    },
    // 是否使用小型分页
    small: {
      type: Boolean,
      default: true
    },
    // 是否需要分页
    pagination: {
      type: Boolean,
      default: true
    },
    // 表格宽度
    width: {
      default: 170
    },

    // 列表数据
    TabelData: {
      type: Array
    },

    // 数据总数
    total: {
      type: Number
    },

    // 列表表头
    TableHead: {
      type: Array
    },

    // 查询条件
    /*
    * sizes : 必带参数 默认跟 pageSize 一样, 但是不需要跟pageSize改动
    * */
    listQuery: {
      type: Object
    },

    // 当为true 的时候 限制表格宽 , false 的时候 不限制表格宽度
    limitWidth: {
      type: Boolean,
      default: true
    },

    // 每行的操作按钮数据
    /*
    * 当要给没一行 添加事件按钮的时候 使用 ( 当不传数据 默认没有 )
    *rowHandleBut 中必须带两个 属性
    *   butValue 这个是按钮现实的文字
    *   butEvent 这个是按钮触发后 向父级发送数据的 事件名称
    *   type 按钮类型  ( primary(主要)  success(成功)  info(信息)  warning(警告)  danger(危险) )
    *
    * */
    rowHandleBut: {
      type: Array
    },

    // 是否需要复选框
    selection: {
      type: Boolean,
      default: true
    },

    // 是否需要提示
    popover: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tableKey: 0,
      // listLoading: false,
      // 复选框
      multipleSelection: [],
      sMultipleSelection: ''
    }
  },
  computed: {
    computedWidth() {
      if (this.rowHandleBut) {
        var W = this.rowHandleBut.length * 100
        return `${W}px`
      }
    }

    // pagination() {
    //   if (this.listQuery) {
    //     return true
    //   } else {
    //     return false
    //   }
    //   console.log('枫叶')
    //   console.log(this.listQuery)
    // }
  },
  watch: {
    TableList() {
      // this.listLoading = !this.listLoading
    }
  },
  created() {},
  methods: {

    // 计算分页组件得 pageSizes
    pageSizes() {
      var sizes = this.listQuery.sizes
      return [sizes, sizes * 2, sizes * 4, sizes * 5]
    },

    isShowIndex(item) {
      if (item.field == 'index') {
        return `60px`
      } else {
        if (this.limitWidth) {
          return this.width + 'px'
        } else {
          return ''
        }
      }
    },
    // 双击
    rowDblclick(row) {
      this.$emit('rowDblclick', row)
    },

    // 单击
    rowClick(row) {
      this.$emit('rowClick', row)
    },

    // 每行操作的事件
    rowHandle(eventV, row) {
      this.$emit(eventV, row)
    },

    // 复选框
    selectionChange(row) {
      this.multipleSelection = row
      const dataTemp = []
      for (let i = 0; i < row.length; i++) {
        dataTemp.push(row[i].id)
      }
      this.sMultipleSelection = dataTemp.join()
      this.$emit('selectionChange', this.sMultipleSelection, this.multipleSelection)
    },

    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },

    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

<style>

</style>
